<template>
    <el-dialog v-model="editData.visible" :title="editData.title" center width="50%" top="10vh" :close-on-click-modal="false">
        <div class="dialog-content">
            <el-form :model="editData.form" label-width="auto" style="width:100%" ref="formRef" :rules="editData.rules">
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="活动标题" prop="title">
                            <el-input v-model="editData.form.title" placeholder="请输入活动标题" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="活动时间" prop="time">
                            <el-date-picker v-model="editData.form.time" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="活动地点" prop="location">
                            <el-input v-model="editData.form.location" placeholder="请输入活动地点" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model="editData.form.address" placeholder="请输入详细地址" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="地址经度" prop="longitude">
                            <el-input v-model="editData.form.longitude" placeholder="请输入活动坐标经度" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="地址纬度" prop="latitude">
                            <el-input v-model="editData.form.latitude" placeholder="请输入活动坐标纬度" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="允许报名人数" prop="maxParticipants">
                            <el-input-number style="width:100%;" v-model="editData.form.maxParticipants" placeholder="请输入允许报名人数" clearable controls-position="right"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="积分范围">
                            <el-row style="width:100%">
                                <el-col :span="11">
                                    <el-form-item prop="minIntegral">
                                        <el-input-number v-model="editData.form.minIntegral" placeholder="最低积分" clearable style="width:100%;"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" class="text-center">
                                    <span class="text-gray-500">-</span>
                                </el-col>
                                <el-col :span="11">
                                    <el-form-item prop="maxIntegral">
                                        <el-input-number v-model="editData.form.maxIntegral" placeholder="最高积分" clearable style="width:100%;"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="UTR范围">
                            <el-row style="width:100%">
                                <el-col :span="11">
                                    <el-form-item prop="minUtr">
                                        <el-input-number v-model="editData.form.minUtr" placeholder="最低UTR" clearable style="width:100%;"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" class="text-center">
                                    <span class="text-gray-500">-</span>
                                </el-col>
                                <el-col :span="11">
                                    <el-form-item prop="maxUtr">
                                        <el-input-number v-model="editData.form.maxUtr" placeholder="最高UTR" clearable style="width:100%;"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="预估费用（每人）" prop="phone">
                            <el-input v-model="editData.form.fee" type="number" placeholder="请输入预估费用" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="联系方式" prop="phone">
                            <el-input v-model="editData.form.phone" placeholder="请输入联系方式" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="创建人Id" prop="userId">
                            <el-input v-model="editData.form.userId" placeholder="请输入创建人Id" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="是否公开" prop="public">
                            <el-switch v-model="editData.form.public" :active-value="1" :inactive-value="0"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="约球说明" prop="description">
                            <el-input v-model="editData.form.description" placeholder="请输入约球说明" clearable type="textarea" :rows="5"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="图片说明" prop="images">
                            <upload-img v-model="editData.form.images" :aspect-ratio="5/4" mode="multiple"></upload-img>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editData.visible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup>
import { nextTick, reactive, ref, useTemplateRef } from 'vue'
import userApi from 'api/model/platform-user.js'
import ballactiveApi from '@/api/model/ballactive.js'
import UploadImg from '@/components/comp-upload/upload-img.vue'

const emits = defineEmits(['update'])
defineExpose({ openDialog })
const formRef = useTemplateRef('formRef')
const editData = reactive({
    type: 'add',
    visible: false,
    form: {
        id: '',
        title: '',
        time: '',
        maxParticipants: '',
        phone: '',
        public: 0,
        description: '',
        images: [],
        location: '',
        longitude: '',
        latitude: '',
        minIntegral: '',
        maxIntegral: '',
        address: '',
        userId: '',
        minUtr: '',
        maxUtr: '',
        fee: ''
    },
    rules: {
        nickname: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
    }
})

/**
 * 打开弹框
 * @param type
 * @param item
 */
function openDialog (type, item) {
    editData.title = type === 'add' ? '新增活动' : '编辑活动'
    editData.visible = true
    editData.type = type
    editData.form.id = ''
    nextTick(() => {
        formRef.value.resetFields()
        if (type === 'update') {
            const {
                id,
                title,
                startTime,
                endTime,
                phone,
                minIntegral,
                maxIntegral,
                maxParticipants,
                latitude,
                longitude,
                location,
                address,
                description,
                images,
                public: isPublic,
                userId,
                minUtr,
                maxUtr,
                fee
            } = item || {}
            editData.form.id = id
            editData.form.title = title
            editData.form.phone = phone
            editData.form.minIntegral = minIntegral
            editData.form.maxIntegral = maxIntegral
            editData.form.maxParticipants = maxParticipants
            editData.form.longitude = longitude
            editData.form.latitude = latitude
            editData.form.location = location
            editData.form.address = address
            editData.form.description = description
            editData.form.images = images
            editData.form.description = description
            editData.form.time = [startTime, endTime]
            editData.form.userId = userId
            editData.form.public = isPublic
            editData.form.minUtr = minUtr
            editData.form.maxUtr = maxUtr
            editData.form.fee = fee
        }
    })
}

/**
 * 提交表单
 */
function submitForm () {
    formRef.value.validate(async valid => {
        if (!valid) return
        editData.type === 'add' ? addItem() : updateItem()
    })
}

/**
 *  新增操作
 */
async function addItem () {
    const { code, data = [] } = await ballactiveApi.add.post({
        title: editData.form.title,
        startTime: editData.form.time[0],
        endTime: editData.form.time[1],
        maxParticipants: editData.form.maxParticipants,
        phone: editData.form.phone,
        public: editData.form.public,
        description: editData.form.description,
        images: editData.form.images,
        location: editData.form.location,
        longitude: editData.form.longitude,
        latitude: editData.form.latitude,
        minIntegral: editData.form.minIntegral,
        maxIntegral: editData.form.maxIntegral,
        address: editData.form.address,
        userId: editData.form.userId,
        fee: editData.form.fee,
        minUtr: editData.form.minUtr,
        maxUtr: editData.form.maxUtr,
    })
    if (code === 200) {
        ElMessage.success('新增成功')
        editData.visible = false
        emits('update')
    } else {
        ElMessage.error('新增失败')
    }
}

/**
 *  更新操作
 */
async function updateItem () {
    const { code, data = [] } = await ballactiveApi.update.post({
        id: editData.form.id,
        title: editData.form.title,
        startTime: editData.form.time[0],
        endTime: editData.form.time[1],
        maxParticipants: editData.form.maxParticipants,
        phone: editData.form.phone,
        public: editData.form.public,
        description: editData.form.description,
        images: editData.form.images,
        location: editData.form.location,
        longitude: editData.form.longitude,
        latitude: editData.form.latitude,
        minIntegral: editData.form.minIntegral,
        maxIntegral: editData.form.maxIntegral,
        address: editData.form.address,
        userId: editData.form.userId,
        fee: editData.form.fee,
        minUtr: editData.form.minUtr,
        maxUtr: editData.form.maxUtr,
    })
    if (code === 200) {
        ElMessage.success('编辑成功')
        editData.visible = false
        emits('update')
    } else {
        ElMessage.error('编辑失败')
    }
}
</script>

<style lang="less">

</style>
